<template>
  <div class="toolBar">
    <div class="menus">
      <div class="menu-item" v-for="menuItem in menusList" :key="menuItem.id">
        <div  class="menu-item-title buttons hand">
          <i class="iconfont icon-caret-down" />
          <span style="margin-left: 3px;">{{ menuItem.account }}</span>
        </div>
        <template v-if="menuItem.isCollapse">
          <template v-for="(menu, menuIndex) in menuItem.folderList" :key="menuItem.id + menuIndex">
            <div  v-if="!menu.children || !menu.children.length" @contextmenu.stop="onRightClick(menu, menuItem.id)"  class="module ">
              <div @click.stop="moveEmailToFolder(menu, menuItem)" :class="{'is-active': isActive(menu, menuItem)}" class="buttons hand">
                <div >
                  <span>{{ menu.folderName }}</span>
                  <span style="color: #f73131;" v-if="menu.enName === 'inbox' && menuItem.unreadNum">（{{ menuItem.unreadNum }}）</span>
                </div>
              </div>
            </div>
            <template v-else>
              <FolderItem @subHandleMove="subHandleMove" :parentItemAccount="menuItem.account" :unreadNum="menuItem.unreadNum" :folderItem="menu" />
            </template>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="">
import { ref, defineEmits, defineAsyncComponent } from 'vue'
import { storeToRefs } from 'pinia';
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores/index';

const FolderItem = defineAsyncComponent(() => import('/@/components/moveEmailFolder/components/folderItem.vue'));

const menusList = ref<any[]>([]);
const emit = defineEmits(['onClick', 'handleMove'])
const currentMenu = ref<any>({});
const stores = useEmail(pinia);

const { accountList, curAccount, curFolder } = storeToRefs(stores);

const moveEmailToFolder = (menu:any, parentItem:any) => {
    let folderName = menu.folderName;
    if(menu.folderName === '收件箱') {
        folderName = 'INBOX'
    }
    let params = {
        account: parentItem.account,
        sourceFolderName: curFolder.value,
        targetFolderName: folderName,
    }
    emit('handleMove', params);
}

const subHandleMove = (params: any) => {
  emit('handleMove', params);
}

const isActive = (item:any, parentItem: any) => {
  let folderName = curFolder.value;
  if(folderName === 'INBOX') {
    folderName = '收件箱'
  }
  return folderName === item.folderName && parentItem.account === curAccount.value;
}

const onRightClick = (nemu: any, menuId: any) => {
  currentMenu.value.name = menuId + '.' + nemu.folderName;
}

const getFolderList = async () => {
  menusList.value = accountList.value.filter((item: any) => {
    if(item.account === curAccount.value) {
      item.folderList = item.folderList.filter((i: any) => {
        return i.folderName !== '星标邮件'
      })
    }
    return item.account === curAccount.value;
  })

  menusList.value.forEach((item: any) => {
    if(item.account === curAccount.value) {
      // 是否收起
      item.isCollapse = true;
    } else {
      item.isCollapse = false;
    }
  });
}

getFolderList();
</script>

<style lang="scss" scoped>
.toolBar {
  width:100%;

  .menus {
    .menu-item {
      margin-bottom: 12px;
    }

    .module, .menu-item-title {
      position: relative;
      display: flex;
      align-items: center;
      height: 30px;

      .buttons {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        padding-right: 3px;
        padding-left: 15px;
        font-size: 12px;
        width: 100%;
        height: 30px;

        & > span {
          margin-left: 6px;
        }
      }

      .arrow {
        display: flex;
        align-items: center;
        width: 15px;
        height: 100%;
        border-left: 1px solid rgb(255 255 255 / 0%);
      }

      &::after {
        position: absolute;
        top: 28px;
        left: 0;
        width: 100%;
        height: 2px;
        content: "";
      }

      .child, .menu-item-child {
        position: absolute;
        top: 15px;
        right: -30px;
        z-index: 2024;
        color: #333;
        width: 120px;
        background-color: #fff;
        box-shadow: 0 0 6px #7d93a8;


        .childRow {
          position: relative;
          width: 100%;
          font-size: 12px;
          border-bottom: 1px solid #dbe2e8;

          .childLabel {
            width: 60%;
            height: 25px;
            margin: auto;
            line-height: 25px;
          }

          .logo {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 5px;
            margin: auto;
          }

          &:hover {
            color: #fff;
            background: linear-gradient(#7d93a8, #6d7e8e);
          }
        }
      }

      &:hover {
        .buttons {
          color: #fff;
          background: #7d93a8;
        }
      }
    }
    .menu-item-title:hover {
      .menu-item-child{
        display: initial;
      }
    }
    .menu-item-child {
        position: absolute;
        top: 30px;
        right: -30px;
        z-index: 2024;
        display: none;
        width: 140px;
        background-color: #fff;
        box-shadow: 0 0 6px rgb(0 0 0 / 12%);

        .childRow {
          position: relative;
          width: 100%;
          font-size: 12px;

          .childLabel {
            width: 60%;
            height: 25px;
            margin: auto;
            line-height: 25px;
          }

          .logo {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 5px;
            margin: auto;
          }

          &:hover {
            color: #fff;
            background: linear-gradient(#7d93a8, #6d7e8e);
          }
        }
      }
  }
}
.is-active {
  color: #fff;
  background: linear-gradient(#7d93a8, #6d7e8e);
}
</style>
